React Router

2017-05-12

1、React Router的作用

一、React Router解决了React components 到URl之间的同步映射关系
二、Route组件定义了URL路径与组件的对应关系
三、路由器Router其实就是React的一个组件，在使用的时候，直接引用。

下面举一个例子，在没有使用React Router时，我们的代码

var About = React.createClass({
  render: function () {
    return <h2>About</h2>;
  }
});
var Inbox = React.createClass({
  render: function () {
    return <h2>Inbox</h2>;
  }
});
var Home = React.createClass({
  render: function () {
    return <h2>Home</h2>;
  }
});
var App = React.createClass({
  render () {
    var Child;
    switch (this.props.route) {
      case 'about': Child = About; break;
      case 'inbox': Child = Inbox; break;
      default:      Child = Home;
    }
    return (
      <div>
        <h1>App</h1>
        <Child/>
      </div>
    )
  }
});
function render () {
  var route = window.location.hash.substr(1);
  React.render(<App route={route} />, document.body);
}
window.addEventListener('hashchange', render);
render(); // render initially

一、在hash值改变的时候，App 将会根据this.props.route值的改变来动态渲染 component。
二、这样的做法虽然看起来很直接，但是会导致整个应用程序变得更加复杂。比如，如果组件 Inbox 有一些内嵌的子组件需要根据例如 inbox/message/:id 或者 inbox/unread 等这样的路由规则做动态渲染的时候。我们需要一些更加智能的手段来把路由信息传递给我们的App，这样Inbox 组件可以根据URL的映射关系来控制哪些子组件应该需要被渲染。
三、很多组件应该根据URL的规则来做动态渲染。在不使用路由规则的前提下，复杂一点的路由需求就需要我们写很多条件判断的代码去去解决实RL和层级组件的同步问题。

引入React Router

var Router = require('react-router');
 var Route = Router.Route;
 // declare our routes and their hierarchy
 var routes = (
   <Route handler={App}>
     <Route path="about" handler={About}/>
     <Route path="inbox" handler={Inbox}/>
   </Route>
 );
 var RouteHandler = Router.RouteHandler;
 var App = React.createClass({
   render () {
     return (
       <div>
         <h1>App</h1>
         <RouteHandler/>
       </div>
     )
   }
 });
  Router.run(routes, Router.HashLocation, (Root) => {
   React.render(<Root/>, document.body);
 });
 var Message = React.createClass({
   render () {
     return <h3>Message</h3>;
   }
 });
 var routes = (
   <Route handler={App}>
     <Route path="about" handler={About}/>
     <Route path="inbox" handler={Inbox}>
       <Route path="messages/:id" handler={Message}/>
     </Route>
   </Route>
 );

一、Root 是 React Router 路由匹配后决定渲染的最高层级的组件，告诉 RouterHandle 应该渲染的内容是什么。组件是不会被渲染的。只是一个创建内部路由规则的配置对象。
二、解决复杂的URL和层级组件之间的映射关系式React Router 的核心。
三、使用声明式的方式为举的例子引入路由。使用JSX的方式来进行路由的配置，这样就可以通过属性的方式来配置页面视图的层级关系。

2、Redirect 组件

<Route path="inbox" component={Inbox}>
   {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
   ＜Redirect from="messages/:id" to="/messages/:id" />
 </Route>

一、Redirect组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由。
二、{/ 从 /inbox/messages/:id 跳转到 /messages/:id /}